<template>
  <div class="category">
    <h1 style="margin-bottom: 20px">{{ this.$route.meta.title }}</h1>
    <el-form ref="category" :model="sizeForm" label-width="120px" size="large">
      <el-form-item label="选择分类">
        <div class="cascader">
          <el-cascader
            :options="options"
            :props="{ checkStrictly: true, value: 'value' }"
            size="large"
            clearable
            placeholder="请选择已经存在的分类"
            v-model="value"
          ></el-cascader>
        </div>
      </el-form-item>
      <el-form-item label="新增分类" v-if="isUp">
        <el-input
          v-model="sizeForm['children']"
          placeholder="如增加一级分类，不要选择已经存在的分类"
        ></el-input>
      </el-form-item>
      <el-form-item size="large">
        <!-- <el-button type="default" @click="add">添加子分类</el-button> -->
        <el-button type="danger" @click="del">删除</el-button>
        <el-button type="primary" @click="onSubmit">上传</el-button>
        <!-- <el-button>取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { pinyin } from "pinyin-pro";
export default {
  name: "Category",
  data() {
    return {
      isUp: true,
      sizeForm: {
        children: "",
      },
      options: [],
      value: [],
    };
  },
  methods: {
    del() {
      console.log(this.value);
      this.axios
        .get("/api/v1/category/del", {
          params: {
            data: this.value,
          },
        })
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.msg,
            type: res.code ? "success" : "warning",
          });
          location.reload();
        });
    },
    onSubmit() {
      let str = pinyin("", { toneType: "none" });
      str = str.replace(/\s/gi, "");
      let value = [...this.value, this.sizeForm.children];
      let index = null;
      let first = this.options.find((item, ind) => {
        index = ind;
        return item.value == this.value[0];
      });
      //递归添加分类函数  18min
      function deep(obj, arr, index = 0) {
        // console.log(obj, "obj");
        let has = obj.children.find((item) => {
          return item.value == arr[index];
        });
        // console.log(has, "has");
        if (has) {
          if (!has.children) has.children = [];
          deep(has, arr, index + 1);
        } else {
          obj.children.push({
            label: arr[index + 1],
            value: pinyin(arr[index + 1], { toneType: "none" }).replaceAll(
              " ",
              ""
            ),
          });
        }
        return obj;
      }
      let data = null;
      if (value.length > 1) {
        data = deep(first, value);
        this.options.splice(index, 1, data);
      } else {
        data = {
          label: value[0],
          value: pinyin(value[0], { toneType: "none" }).replaceAll(" ", ""),
          children: [],
        };
        this.options.push(data);
      }
      this.axios
        .get("/api/v1/category/add", { params: { data: JSON.stringify(data) } })
        .then((res) => {
          this.$message({
            message: res.msg,
            type: res.code ? "success" : "warning",
          });
          if (res.code == 1) {
            this.value = "";
            this.sizeForm.children = "";
          }
        });
    },
    handleChange() {},
  },
  components: {},
  created() {
    //   console.log(pinyin("你好cs",{toneType: 'none'}));
    this.axios.get("/api/v1/category").then((res) => {
      //初始化分类
      this.options = res.data;
      console.log(res.data);
    });
    // console.log(this.$route);
  },
};
/* 
递归插入数据
function add(obj, index = 0) {
        console.log(arr,"arr");
        let has = obj.children.find((item) => {
          // console.log(item,"item");
          // console.log(arr[index + 1],"arr[index + 1]");
          return item.value == value[index + 1];
        });
        if(has){
          if(has.children){
            add(has.children,index+1)
          }else{
            has.children=[];
            has.push({label:""})
          }
        }
        console.log(has, "ss");
      }
      add(first, value); */
</script>
<style scoped>
.cascader div {
  width: 100%;
}
</style>